<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">订单详情</block>
		</cu-custom>
		
		<view class="cu-card article no-card padding-top-xs" v-if="state == 3">
			<view class="cu-item shadow padding-top">
				<view class="content">
					<view class="desc text-center text-grey">
						订单已取消
					</view>
				</view>
			</view>
		</view>
		<view class="cu-card article no-card padding-top-xs" v-if="state == 2">
			<view class="cu-item shadow padding-top">
				<view class="content">
					<view class="desc text-center">
						订单已完成
					</view>
				</view>
			</view>
		</view>
		<view class="cu-card article no-card padding-top-xs" v-if="state == 1">
			<view class="cu-item shadow padding-top">
				<view class="content">
					<view class="desc text-center text-grey">
						<view class="cu-steps text-xs">
							<view class="cu-item" :class="index>basics?'':'text-red'" v-for="(item,index) in basicsList" :key="index">
								<text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
							</view>
						</view>
						<view class="padding-top-lg">
							<button class="cu-btn radius line-gray" >取消订单</button>
							<button class="cu-btn radius bg-orange margin-left-lg" >继续支付</button>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top">
				<view class="content">
					<view class="desc">
						<view class="grid col-2">
							<view>实时外卖订单</view>
							<view class="text-right">预计送达:2020-04-27 15:40</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top">
				<view class="content">
					<view class="desc">
						<view>小菜猿(合肥万象城店)<text class="cuIcon-right"></text></view>
						<view class="padding-top-xs text-grey">距离您：275m</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top">
				<view class="content">
					<view class="desc">
						订单编号：16451122554112224
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top">
				<view class="content">
					<view class="desc text-center text-bold">
						<text class="cuIcon-phone shadow" @tap="call"> 联系商家</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top">
				<view class="content">
					<view class="desc">
						<view>安徽省合肥市蜀山区潜山路与习友路交口汇处西北侧 华润万象城</view>
						<view class="padding-top-xs text-grey">孙先生  17355556666</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top">
				<view class="content">
					<view class="desc">
						支付方式：微信支付
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top-xs">
				<view class="content">
					<view class="desc">
						<view style="border-bottom: 2upx solid #eeeeee;" class="padding-bottom-xs text-bold">优惠信息</view>
						<view class="padding-top">
							<view class="grid col-2">
								<view>满59减20，满79减30</view>
								<view class="text-right">-￥30</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top-xs">
				<view class="content">
					<view class="desc">
						<view style="border-bottom: 2upx solid #eeeeee;" class="padding-bottom-xs text-bold">餐品信息</view>
						<view class="padding-top">
							<view class="flex padding-bottom-sm">
								<view class="flex-treble">正味鸭掌(大份)</view>
								<view class="flex-sub text-right text-orange">1份</view>
								<view class="flex-sub text-right text-orange">￥30</view>
							</view>
							<view class="flex padding-bottom-sm">
								<view class="flex-treble">紫笋羊排</view>
								<view class="flex-sub text-right text-orange">1份</view>
								<view class="flex-sub text-right text-orange">￥55</view>
							</view>
							<view class="flex padding-top-sm" style="border-top: 2upx solid #eeeeee;">
								<view class="flex-treble"></view>
								<view class="flex-sub text-right">共1份</view>
								<view class="flex-sub text-right">￥85</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-card article no-card padding-top-xs">
			<view class="cu-item shadow padding-top-xs">
				<view class="content">
					<view class="desc">
						<view class="padding-top">
							<view class="flex padding-bottom-sm">
								<view class="flex-treble"></view>
								<view class="flex-sub text-right">配送费</view>
								<view class="flex-sub text-right text-orange">￥6</view>
							</view>
							<view class="flex padding-bottom-sm">
								<view class="flex-treble"></view>
								<view class="flex-sub text-right">餐盒费</view>
								<view class="flex-sub text-right text-orange">￥0</view>
							</view>
							<view class="flex padding-bottom-sm">
								<view class="flex-treble"></view>
								<view class="flex-sub text-right">合计</view>
								<view class="flex-sub text-right text-orange">￥61</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				basics: 0,
				basicsList: [{
					cuIcon: 'radioboxfill',
					name: '待支付'
				}, {
					cuIcon: 'radioboxfill',
					name: '订单发送'
				}, {
					cuIcon: 'radioboxfill',
					name: '商家确认'
				}, {
					cuIcon: 'radioboxfill',
					name: '备餐中'
				},{
					cuIcon: 'radioboxfill',
					name: '配送中'
				},{
					cuIcon: 'radioboxfill',
					name: '订单完成'
				}],
				state: 0
			}
		},
		onLoad(options) {
			this.state = options.state;
			//this.state = 1;
		},
		methods: {
			call(){
				uni.makePhoneCall({
				    phoneNumber: '0551-62148111' //仅为示例
				});
			}
		}
	}
</script>

<style>

</style>
